<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>

</head>
<body>

<button>slideDown</button>
<button>slideUp</button>
<button>slideToggle</button>
<div class="div"></div>

<script src="jquery-3.6.0.js"></script>
<script>
    /*
        折叠动画：
          1.slideDown() 显示
          2.slideUp() 隐藏
          3.slideToggle() 切换
           =》本身显示就切换到隐藏
           =》本身隐藏就切换到显示
          + 对于以上三个函数都有相同的参数
           =》第一个参数表示运动时间
           =》第二个参数表示运动曲线
           =》第三个参数表示运动结束后的回调函数
     */

    $('button:nth-child(1)').click(function () {
        $('.div').slideDown(
            1000,
            'linear',
            function () {
                console.log('show 结束')
            }
        )
    })
    $('button:nth-child(2)').click(function () {
        $('.div').slideUp(
            1000,
            'linear',
            function () {
                console.log('hide 结束')
            }
        )
    })
    $('button:nth-child(3)').click(function () {
        $('.div').slideToggle(
            1000,
            'linear',
            function () {
                console.log('toggle 结束')
            }
        )
    })
</script>

</body>
</html>